
<template>
  <div class="auxiliary-segmentation" :style="containerStyle">
    <div
      class="segmentation-container"
      :style="containerInnerStyle"
    >
      <!-- 分割线 -->
      <div
        v-if="data.segmentType === 'line'"
        class="segmentation-line"
        :style="lineStyle"
      />
    </div>

    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>

<script setup>
import { computed } from 'vue'

// 定义组件属性
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  styles: {
    type: Object,
    default: () => ({})
  }
})

// 计算容器样式
const containerStyle = computed(() => {
  return {
    marginTop: `${props.styles.marginTop || 0}px`,
    marginBottom: `${props.styles.marginBottom || 0}px`,
    marginLeft: `${props.styles.marginLeft || 0}px`,
    marginRight: `${props.styles.marginRight || 0}px`
  }
})

// 计算容器内部样式
const containerInnerStyle = computed(() => {
  return {
    height: `${props.data.height || 10}px`,
    padding: props.data.paddingType === 'custom' ? `0 ${props.data.paddingHorizontal || 15}px` : '0px'
  }
})

// 计算分割线样式
const lineStyle = computed(() => {
  return {
    height: '1px',
    width: '100%',
    borderTopWidth: '1px',
    borderTopStyle: props.data.lineStyle || 'solid',
    borderTopColor: props.data.lineColor || '#e4e7ed'
  }
})
</script>

<style lang="scss" scoped>
.auxiliary-segmentation {
  width: 100%;
  box-sizing: border-box;

  .segmentation-container {
    display: flex;
    align-items: center;
    width: 100%;

    .segmentation-line {
      width: 100%;
    }
  }
}
</style>
